<template >
    <div class="table-data">
        <div class="search-box">
            <el-button type="primary" @click="handleAdd()" size="small"><i class="el-icon-plus"></i><span>新增模板</span></el-button>
        </div>
        <el-table :data="list" :header-cell-style="headClass" style="width:100%" :height="tHeight" class="table-box">
            <el-table-column prop="id" align="center" label="id" width="100"></el-table-column>
            <el-table-column prop="name" align="center" label="模板名称" ></el-table-column>
            <el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
            <el-table-column prop="update_time" label="更新时间" align="center"></el-table-column>
            <el-table-column label="操作" align="center" >
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="edit(scope.row.id, scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row.id,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pages" ref="page-box">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10,30,50]"
            :page-size="size"
            layout="total,sizes,prev,pager,next,jumper"
            :total="total"
        ></el-pagination>
        </div>
        <el-dialog :title="title" :visible.sync="dialogFormVisible" width="60%" :close-on-click-modal="false">
            <el-form label-width="110px" ref="form" :model="form">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="名称：">
                            <el-input v-model="form.name" size="small" placeholder="请输入运费模板"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="是否包邮：">
                            <el-radio-group v-model="form.type">
                                <el-radio :label="0">否</el-radio>
                                <el-radio :label="1">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 配送省份 -->
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="默认范围：">
                            <el-input v-model="form.defaults.area[0]" size="small" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="form.type === 0">
                    <el-col :span="6">
                        <el-form-item label="起重：">
                            <el-input v-model="form.defaults.weight" size="small" placeholder="起始重量">
                                <template slot="prepend">kg</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="起重价：">
                            <el-input v-model="form.defaults.cost" size="small" placeholder="起始价格">
                                <template slot="prepend">￥</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="续重：">
                            <el-input v-model="form.defaults.inc_weight" size="small" placeholder="续重">
                                <template slot="prepend">kg</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="续重价：">
                            <el-input v-model="form.defaults.inc_cost" size="small" placeholder="续重价">
                                <template slot="prepend">￥</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div v-if="form.type === 0">
                    <div v-for="(areaItem, index) in form.other" :key="index">
                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="特殊省份：">
                                    <transfer-tree :checkedIds=areaItem.area :key="timer"  :index=index  @change-checked="areaChange" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" style="float:right">
                                <el-button type="danger" plain @click="removeArea(index)">删除</el-button>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="起重：">
                                    <el-input v-model="areaItem.weight" size="small" placeholder="起始重量">
                                        <template slot="prepend">kg</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="起重价：">
                                    <el-input v-model="areaItem.cost" size="small" placeholder="起始价格">
                                        <template slot="prepend">￥</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="续重：">
                                    <el-input v-model="areaItem.inc_weight" size="small" placeholder="续重">
                                        <template slot="prepend">kg</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="续重价：">
                                    <el-input v-model="areaItem.inc_cost" size="small" placeholder="续重价">
                                        <template slot="prepend">￥</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <el-form-item label="新增特殊省份：" v-if="form.type === 0">
                    <el-button type="primary" size="small" @click="addProvince">新增</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button size="small" @click="cancel">取消</el-button>
                <el-button size="small" type="primary" @click="submit">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import goodsApi from "@/api/goods";
import transferTree from "@/components/treeTransfer";
export default {
    components: {
        transferTree
    },
    data() {
        return {
            list: [],
            other: [],
            total: 0,
            page: 1,
            size: 10,
            is_free: 1,
            title:'',
            template_id: null,
            template_name: "",
            timer:"",
            dialogFormVisible: false,
            form: {
                id: null,
                name: "",
                type: "",
                defaults: {
                    area: ["全国"],
                    weight: "",
                    cost: "",
                    inc_weight: "",
                    inc_cost: ""
                },
                other: []
            },
            check:true,//防重复提交,
            tHeight: document.body.offsetHeight - 323
        };
    },
    created() {
        this.getList();
    },
    methods: {
        handleCurrentChange(val){
            this.page = val;
            this.getList();
        },
        handleSizeChange(val){
            this.size = val;
            this.page = 1;
            this.getList();
        },
        getList() {
            goodsApi.shippingTemplate(this.page,this.size).then(response => {
                const resp = response.data;
                if (resp.status == false) {
                    this.$message.error(resp.msg);
                    return false;
                }
                this.list = resp.data;
            });
        },
        handleSizeChange(val) {
            this.page = 1;
            this.size = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getList();
        },
        headClass() {
            return "text-align: center;background:#eef1f6;";
        },
        handleAdd() {
            this.dialogFormVisible = true;
            this.resetForm();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.resetForm();
        },
        resetForm(row = null) {
            (this.form.id = row ? row.id : null),
                (this.form.type = row ? row.type : ""),
                (this.form.name = row ? row.name : ""),
                (this.form.defaults = row
                    ? row.default
                    : {
                          area: ["全国"],
                          weight: "",
                          cost: "",
                          inc_weight: "",
                          inc_cost: ""
                      });
            this.form.other = row ? row.other : [];
            console.log(row)
            this.title = '新增运费模板'
        },
        edit(id, row) {
            goodsApi.getTemplateById(id).then(response => {
                const resp = response.data;
                if (!resp.status) {
                    this.$message.error(response.data.msg);
                    return false;
                }
                this.timer = new Date().getTime()
                this.form = resp.data;
            });
            
            this.dialogFormVisible = true;
            this.title = '修改运费模板'
        },
        del(id, row) {
            this.$confirm(`确定删除${row.name}吗`, "是否继续?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnClickModal:false
            }).then(() => {
                goodsApi.delTemplate(id).then(response => {
                    if (response.data.status) {
                        this.$message.success("删除成功");
                        this.getList();
                    } else {
                        this.$message.error(response.data.meg);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });  
            });
        },
        addProvince() {
            this.form.other.push({
                area: [],
                weight: "",
                cost: "",
                inc_weight: "",
                inc_cost: ""
            });
        },
        areaChange(data) {
            this.form.other[data.index].area = data.area;
        },
        removeArea(index) {
            this.$confirm(`确实删除吗`, "是否继续?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                closeOnClickModal:false
            })
                .then(() => {
                    this.form.other.splice(index, 1);
                    this.$message.success("删除成功");
                })
                .catch(() => {});
        },
        submit() {
            if(this.check) {
                let _this = this
                _this.check = false
                goodsApi.saveTemplate(_this.form).then(response => {
                    if (response.data.status === false) {
                        _this.$message.error(response.data.msg);
                        _this.check = true
                        return false;
                    }
                    _this.$message.success("保存成功");
                    _this.getList();
                    _this.dialogFormVisible = false;
                    setTimeout(function(){
                        _this.check = true
                    },1500)
                });
            }
            
        }
    }
};
</script>
<style>
 .pages {
    background: #fff;
    margin-top: 10px;
    padding: 10px 10px;
    text-align: right;
    height: 55px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
</style>
